import { Transformer } from 'markmap-lib'
import { Markmap } from 'markmap-view'
import { useEffect, useRef } from 'react'
import styles from './style.module.less'

/**
 * 脑图
 * @param props 
 * @returns 
 */
export default function MindMap(props: { markdown: string }) {
    const ref = useRef<any>()
    const markmap = useRef<Markmap>()

    useEffect(() => {
        if (ref.current) {
            const transformer = new Transformer();

            const { root, features } = transformer.transform(props.markdown);

            setTimeout(() => {
                if (!markmap.current) {
                    markmap.current = Markmap.create(ref.current!, {
                        autoFit: true,
                        zoom: true
                    }, null)
                }

                markmap.current.setData(root)
            }, 0)
        }
    }, [props.markdown])

    return (
        <svg className={styles["mind-map"]} ref={ref}></svg>
    )
}